<template>
  <div id="fullpage">
    <slot></slot>
  </div>
</template>
<script>
  import status from './static/fullPage'
  import $ from 'jquery'
  export default {
    data(){
      return {
        message: 'hello'
      }
    },
    methods: {
      onLeave(index, nextIndex, direction){
//            console.log('trigger onLeave')
        this.$emit('onLeave',index,nextIndex,direction)
      },
      afterLoad(anchorLink, index){
//            console.log('trigger afterLoad')
        this.$emit('afterLoad',anchorLink, index)
      },
      afterRender(){
//            console.log('trigger afterRender')
        this.$emit('afterRender')
      },
      afterResize(){
//            console.log('trigger afterResize')
        this.$emit('afterResize')
      },
      afterResponsive(isResponsive){
//            console.log('trigger afterResponsive')
        this.$emit('afterResponsive',isResponsive)
      },
      afterSlideLoad(anchorLink, index, slideAnchor, slideIndex){
//            console.log('trigger afterSlideLoad')
        this.$emit('afterSlideLoad',anchorLink, index, slideAnchor, slideIndex)
      },
      onSlideLeave(anchorLink, index, slideIndex, direction, nextSlideIndex){
//            console.log('trigger onSlideLeave')
        this.$emit('onSlideLeave',anchorLink, index, slideIndex, direction, nextSlideIndex)
      },
      createConfig(){
        let config = {};
        if (this.css3 !== undefined)
          config.css3 = this.css3
        if (this.scrollingSpeed !== undefined)
          config.scrollingSpeed = this.scrollingSpeed
        if (this.autoScrolling !== undefined)
          config.autoScrolling = this.autoScrolling
        if (this.fitToSection !== undefined)
          config.fitToSection = this.fitToSection
        if (this.fitToSectionDelay !== undefined)
          config.fitToSectionDelay = this.fitToSectionDelay
        if (this.scrollBar !== undefined)
          config.scrollBar = this.scrollBar
        if (this.easing !== undefined)
          config.easing = this.easing
        if (this.easingcss3 !== undefined)
          config.easingcss3 = this.easingcss3
        if (this.loopBottom !== undefined)
          config.loopBottom = this.loopBottom
        if (this.loopTop !== undefined)
          config.loopTop = this.loopTop
        if (this.loopHorizontal !== undefined)
          config.loopHorizontal = this.loopHorizontal
        if (this.continuousVertical !== undefined)
          config.continuousVertical = this.continuousVertical
        if (this.continuousHorizontal !== undefined)
          config.continuousHorizontal = this.continuousHorizontal
        if (this.scrollHorizontally !== undefined)
          config.scrollHorizontally = this.scrollHorizontally
        if (this.interlockedSlides !== undefined)
          config.interlockedSlides = this.interlockedSlides
        if (this.dragAndMove !== undefined)
          config.dragAndMove = this.dragAndMove
        if (this.offsetSections !== undefined)
          config.offsetSections = this.offsetSections
        if (this.resetSliders !== undefined)
          config.resetSliders = this.resetSliders
        if (this.fadingEffect !== undefined)
          config.fadingEffect = this.fadingEffect
        if (this.normalScrollElements !== undefined)
          config.normalScrollElements = this.normalScrollElements
        if (this.scrollOverflow !== undefined)
          config.scrollOverflow = this.scrollOverflow
        if (this.scrollOverflowReset !== undefined)
          config.scrollOverflowReset = this.scrollOverflowReset
        if (this.scrollOverflowOptions !== undefined)
          config.scrollOverflowOptions = this.scrollOverflowOptions
        if (this.touchSensitivity !== undefined)
          config.touchSensitivity = this.touchSensitivity
        if (this.normalScrollElementTouchThreshold !== undefined)
          config.normalScrollElementTouchThreshold = this.normalScrollElementTouchThreshold
        if (this.bigSectionsDestination !== undefined)
          config.bigSectionsDestination = this.bigSectionsDestination

        //Accessibility
        if (this.css3 !== undefined)
          config.keyboardScrolling = this.keyboardScrolling
        if (this.css3 !== undefined)
          config.animateAnchor = this.animateAnchor
        if (this.css3 !== undefined)
          config.recordHistory = this.recordHistory

        //Design
        if (this.css3 !== undefined)
          config.controlArrows = this.controlArrows
        if (this.css3 !== undefined)
          config.verticalCentered = this.verticalCentered
        if (this.css3 !== undefined)
          config.sectionsColor = this.sectionsColor
        if (this.css3 !== undefined)
          config.paddingTop = this.paddingTop
        if (this.css3 !== undefined)
          config.paddingBottom = this.paddingBottom
        if (this.css3 !== undefined)
          config.fixedElements = this.fixedElements
        if (this.css3 !== undefined)
          config.responsiveWidth = this.responsiveWidth
        if (this.css3 !== undefined)
          config.responsiveHeight = this.responsiveHeight
        if (this.css3 !== undefined)
          config.responsiveSlides = this.responsiveSlides
        if (this.css3 !== undefined)
          config.parallax = this.parallax
        if (this.css3 !== undefined)
          config.parallaxOptions = this.parallaxOptions
        return config
      }
    },
    created(){
      let config = this.createConfig()
      $(document).ready(() => {
        $('#fullpage').fullpage({
          ...config,
          //Custom selectors
          sectionSelector: '.section',
          slideSelector: '.slide',

          lazyLoading: true,

          //回调方法
          onLeave: this.onLeave,
          afterLoad: this.afterLoad,
          afterRender: this.afterRender,
          afterResize: this.afterResize,
          afterResponsive: this.afterResponsive,
          afterSlideLoad: this.afterSlideLoad,
          onSlideLeave: this.onSlideLeave
        });
      })
    },
    beforeDestroy(){
      $.fn.fullpage.destroy('all');
    },
    props: [
      //滑动
      'css3',
      'scrollingSpeed',
      'autoScrolling',
      'fitToSection',
      'fitToSectionDelay',
      'scrollBar',
      'easing',
      'easingcss3',
      'loopBottom',
      'loopTop',
      'loopHorizontal',
      'continuousVertical',
      'continuousHorizontal',
      'scrollHorizontally',
      'interlockedSlides',
      'dragAndMove',
      'normalScrollElements',
      'offsetSections',
      'resetSliders',
      'fadingEffect',
      'scrollOverflow',
      'scrollOverflowReset',
      'scrollOverflowOptions',
      'touchSensitivity',
      'normalScrollElementTouchThreshold',
      'bigSectionsDestination',
      //允许的
      'keyboardScrolling',
      'animateAnchor',
      'recordHistory',
      //设计
      'controlArrows',
      'verticalCentered',
      'sectionsColor',
      'paddingTop',
      'paddingBottom',
      'fixedElements',
      'responsiveWidth',
      'responsiveHeight',
      'responsiveSlides',
      'parallax',
      'parallaxOptions',
    ]
  }
</script>
<style scoped>
  @import "static/jquery.fullPage.css";
</style>
